<template>
  <div>
    <!-- 用户管理页面 -->
    <div class="model">
      <div class="tools">
        <el-button @click="add">添加</el-button>
        <el-button @click="del('')" type="danger">批量删除</el-button>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column width="250" align="center" label="操作">
            <template slot-scope="scope">
              <el-button @click="edit(scope.row)" type="warning"
                >编辑</el-button
              >
              <el-button @click="del(scope.row)" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <AddEditDialog
      v-if="dialogShow"
      ref="AddEditDialog"
      @closed="closed"
      :changeType="type"
    ></AddEditDialog>
  </div>
</template>

<script>
import AddEditDialog from "./components/add-edit-dialog";
export default {
  components: { AddEditDialog },
  data() {
    return {
      dialogShow: false,
      type: "0",
      tableData: []
    };
  },
  methods: {
    getData() {
      this.$http
        .get(this.$baseUrl.searchAdmin, {
          params: {
            pop: "3"
          }
        })
        .then(res => {
          console.log(res.data);
          this.tableData = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    closed(val) {
      this.dialogShow = false;
      if (val) {
        this.getData();
      }
    },
    add() {
      this.dialogShow = true;
      this.$nextTick(() => {
        this.$refs.AddEditDialog.dialogInit();
      });
    },
    del(val) {
      if (val) {
        console.log(val);
      } else {
        console.log(val);
      }
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style scoped lang="scss">
.model {
  .tools {
    padding: 30px 0;
    border-bottom: 1px solid #999;
    margin-bottom: 30px;
  }
}
</style>
